<!--配送商端-销售管理-寄售补货需求订单列表-详情-->
<template>
  <div class="replenishmentOrder-order-detail">
    <el-container class="detail-container-box">
      <el-header height="auto">
        <div
          class="top-info-box"
          v-loading="topLoading">
          <div
            class="top-info-item"
            v-for="(item,index) in topInfo"
            :key="index">
            <span class="text-left">{{ item.value }}</span>
            <span
              class="text-right"
              v-if="item.key==='orderStatus'"
            >{{ orderStatus[topData.orderStatus] }}</span>
            <span
              class="text-right"
              v-else-if="item.key==='orderTotalAmount'"
            >{{ topData.orderTotalAmount | getFormatterPrice }}</span>
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              :content="topData[item.key] + '' "
              placement="top-start"
            >
              <span class="text-right">{{ topData[item.key] }}</span>
            </el-tooltip>
          </div>
        </div>
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        class="table-box"
        :data="tableData"
        height="200"
        v-loading="tableLoading"
        :columns="detailsTableColumns"
      />
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
    <div
      class="part-detail-box"
      v-if="isShowDeliverList">
      <div class="part-title">配送明细</div>
      <el-container class="container-box">
        <el-collapse
          class="collapse-box"
          v-model="activeNames"
          v-for="(item,index) in deliveryDetailList"
          :key="index"
        >
          <el-collapse-item name="1">
            <!-- 标题 -->
            <template slot="title">
              <div class="top-info-box">
                <div class="top-info-item">
                  <span class="text-left">配送单号</span>
                  <span>{{ item.deliveryCode }}</span>
                </div>
                <div class="top-info-item">
                  <span class="text-left">配送时间</span>
                  <span>{{ item.createdAt }}</span>
                </div>
                <div class="top-info-item">
                  <span class="text-left">配送单数量</span>
                  <span>{{ item.sendNumCount }}</span>
                </div>
              </div>
              <!-- <div class="submission-box">
                <el-button
                  class="submission"
                  @click="checkPeerGoodsOrder">查看随货同行单</el-button>
              </div>-->
            </template>
            <!-- 表格 -->
            <div>
              <el-editable
                class="table-box"
                :data="item.pageBean.content"
                height="200"
                v-loading="partDetailTableLoading"
                :columns="partDetailColumns"
              >
                <template
                  slot="default-placeholder"
                  slot-scope="scope">
                  <el-editable
                    class="inside-table-box"
                    :data="scope.row.distributorList"
                    height="200"
                    v-loading="insideTableLoading"
                    :columns="partDetailColumnsInside"
                  />
                </template>
              </el-editable>
              <el-pagination
                class="pagination"
                @size-change="complateHandleSizeChange"
                @current-change="complateHandleCurrentChange"
                :current-page="completedPageList.curPage"
                :page-sizes="completedPageList.PAGE_NUMBER"
                :page-size="completedPageList.pageSize"
                :layout="completedPageList.PAGINATION_LAYOUT"
                :total="completedPageList.totalElements"
              />
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-container>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ElEditable from '@components/el-editable/index.vue'

import {
  TOP_INFO,
  TABLE_COLUMNS,
  PART_DETAIL_COLUMNS,
  PART_DETAIL_COLUMNS_INSIDE,
  ORDER_STATUS_TEXT
} from './const.js'
import { isObject, cloneDeep } from 'lodash'
import { getFormatterPrice } from '@const/filter'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
// import { deliverAddress } from '@const/storageCenterApi'
import {
  deliverAddress,
  replenishmentTopDetail,
  replenishmentTopDetailList,
  deliveryDetailList
} from '@const/beforeSettleApi'

export default {
  name: 'Detail',
  components: { ElEditable },

  data () {
    return {
      orderStatus: ORDER_STATUS_TEXT,
      topInfo: TOP_INFO,
      topData: {},
      topLoading: false,
      tableLoading: false,
      tableData: [],
      detailsTableColumns: TABLE_COLUMNS,
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      // 部分发货详情
      activeNames: [], // 展开收起
      partDetailTableLoading: false,
      partDetailColumns: PART_DETAIL_COLUMNS,
      insideTableLoading: false,
      partDetailColumnsInside: PART_DETAIL_COLUMNS_INSIDE,
      // 配送明细列表
      deliveryDetailList: [],
      completedPageList: {
        curPage: 1,
        PAGE_NUMBER,
        PAGINATION_LAYOUT,
        pageSize: PAGE_NUMBER[0],
        totalElements: 0
      }
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    isShowDeliverList () {
      const status = this.$route.query.orderStatus
      console.log(typeof status)
      return (
        Number(status) === 3 || Number(status) === 4 || Number(status) === 5
      )
    }
  },
  filters: {
    getFormatterPrice
  },
  mounted () {
    this.initNavButtons()
    this.getDetailTopInfo()
    this.getDetailOrderList()
    this.getDeliveryDetailList()
  },
  methods: {
    ...mapMutations(['changeLayoutHandle']),
    // 初始化 导航栏 按钮组
    initNavButtons () {
      const btn = {
        type: 'btn',
        arr: [
          {
            type: 'button',
            noReturn: true,
            val: '返回',
            handle: this.back
          }
        ]
      }
      this.changeLayoutHandle(btn)
    },
    // 获取详情头部信息
    getDetailTopInfo () {
      this.$axios
        .post(`${replenishmentTopDetail}?id=${this.id}`)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          const detailTopInfo = data.payload || {}
          this.getAddressData(detailTopInfo, detailTopInfo.receiveAddressId)
        })
        .catch(e => {})
    },
    getAddressData (baseInfo, id) {
      this.topLoading = true
      this.$axios
        .post(`${deliverAddress}?id=${id}`)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          const {
            province,
            city,
            area,
            detailedAddress,
            userName,
            userPhone
          } = data.payload
          const addressInfo = {
            receiveAddress: `${province} ${city} ${area} ${detailedAddress}`,
            linkMan: userName,
            linkPhone: userPhone
          }
          this.topData = Object.assign({}, baseInfo, addressInfo)
        })
        .catch(e => {})
        .finally(() => {
          this.topLoading = false
        })
    },
    getDetailOrderList () {
      this.tableLoading = true
      this.$axios
        .post(replenishmentTopDetailList, {
          page: this.curPage,
          pageSize: this.pageSize,
          id: this.id
        })
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.tableData = data.payload.content || []
          this.totalElements = data.payload.totalElements
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
        })
    },
    getDeliveryDetailList () {
      this.partDetailTableLoading = true
      this.insideTableLoading = true
      // type标识订单来源，1.批发2.寄售3.跟台
      this.$axios
        .get(`${deliveryDetailList}?id=${this.id}&type=2&page=${this.completedPageList.curPage}&pageSize=${this.completedPageList.pageSize}`)
        .then(({ data }) => {
          console.log(data, '11111')
          if (Number(data.code) !== 0) return
          this.deliveryDetailList = data.payload || []
          this.completedPageList.totalElements = this.deliveryDetailList[0].pageBean.totalElements
        })
        .catch(e => {})
        .finally(() => {
          this.partDetailTableLoading = false
          this.insideTableLoading = false
        })
    },
    checkPeerGoodsOrder () {
      // 查看随货同行单
    },
    back () {
      this.$router.go(-1)
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getDetailOrderList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getDetailOrderList()
    },
    complateHandleSizeChange (size) {
      this.completedPageList.pageSize = size
      this.getDeliveryDetailList()
    },
    complateHandleCurrentChange (curPage) {
      this.completedPageList.curPage = curPage
      this.getDeliveryDetailList()
    }
  }
}
</script>

<style lang="less">
@import '../m-front-common/pc/assets/var.less';
@textColor: #26344c;
@grayColor: #a7b1c7;

.replenishmentOrder-order-detail {
  .top-info-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .top-info-item {
      width: 33.33%;
      font-size: @defaultFontSize;
      color: @textColor;
      font-weight: 400;
      padding-bottom: 20px;

      .text-left {
        color: @grayColor;
        padding-right: 10px;
        width: 120px;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
      }

      .text-right {
        display: inline-block;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    }
  }

  .detail-container-box {
    height: 100%;
    overflow: auto;

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }

  .part-detail-box {
    .part-title {
      font-size: 18px;
      font-weight: 600;
      width: 100%;
      display: block;
      margin: 20px;
    }

    .top-form {
      display: flex;
    }

    .collapse-box {
      width: 100%;

      .top-info-box {
        width: 100%;

        .top-info-item {
          padding-bottom: 0;
          width: 33%;

          .text-left {
            width: 80px;
          }
        }
      }

      .title-box {
        width: 100%;
      }

      .form-box {
        width: 500px;
        float: left;
      }

      .submission-box {
        float: right;
        margin-right: 10px;
      }
    }

    .operation-details-form {
      display: flex;
    }

    .addbutton {
      border: none;
      background: none;
      color: rgba(35, 113, 197, 1);
    }

    .submission {
      background: rgba(35, 113, 197, 1);
      border: 0;
      color: #fff;
      margin-bottom: 10px;
    }

    .topInput {
      width: 211px;
    }

    .formToptext {
      margin-bottom: 20px;

      .el-form-item {
        margin-right: 16px;
        margin-bottom: 16px;

        .textBox {
          width: 220px;
        }
      }

      .el-form-item__label {
        padding-right: 10px;
      }
    }
  }
}
</style>
